<template>
	<view>
		<view class="flex-r-b-c safe-padding" style="height: 50px;width: 100%;background-color: #FFFFFF;position: fixed;left: 0px;z-index: 999;">
			<view class="flex-c-c-c" style="width: 25%;height: 100%;" v-for="(v,i) in list" :key="i" @click="jump(i)">
				<image :src="active===i?v.selectedIconPath:v.iconPath" mode="heightFix" style="height:23px;"></image>
				<text style="font-size: 12px;margin-top: 2px;" :style="{color:active===i?'#0F4C3A':'#999999'}">{{v.text}}</text>
			</view>
		</view>
		<view class="safe-paddings" style="position: fixed;bottom: 0;left: 0;z-index: 999;width: 750rpx;background-color: #FFFFFF;"></view>
		<!-- 占位view -->
		<view style="height: 50px;width: 100%;"></view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			active: {
				type: Number,
				default: 0

			}
		},
		data() {
			return {
				list: [{
					"pagePath": "/pages/tabBar/home/home",
					"iconPath": "/static/tabBar/home1.png",
					"selectedIconPath": "/static/tabBar/home2.png",
					"text": "首页"
				}, {
					// "pagePath": "/pages/tabBar/order/order",
					"pagePath": "/pages/tabBar/serviceReservation/serviceReservation",
					"iconPath": "/static/tabBar/order1.png",
					"selectedIconPath": "/static/tabBar/order2.png",
					"text": "预约"
				}, {
					"pagePath": "/pages/tabBar/newService/newService",
					"iconPath": "/static/tabBar/service1.png",
					"selectedIconPath": "/static/tabBar/service2.png",
					"text": "商城"
				}, {
					"pagePath": "/pages/tabBar/mine/mine",
					"iconPath": "/static/tabBar/mine1.png",
					"selectedIconPath": "/static/tabBar/mine2.png",
					"text": "我的"
				}]
			};
		},
		methods:{
			jump(i){//自定义tabbar点击跳转
			if(i==2|| i==1){
				uni.navigateTo({
					url:this.list[i].pagePath
				})
			}else{
				uni.switchTab({
					url:this.list[i].pagePath
				})
			}
				
			}
		},
	}
</script>

<style lang="less">

.safe-padding {
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
  
}
.safe-paddings{
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>
